<template>
  <div class="realtime-flow">
    <!-- 当前客流量展示 -->
    <div class="current-flow flex items-center justify-between mb-6">
      <div class="flow-info">
        <div class="text-xl font-medium text-gray-900 dark:text-white">
          {{ getCurrentStatus.text }}
        </div>
        <div class="text-sm text-gray-500 dark:text-gray-400 mt-1">
          当前客流量预估: {{ currentFlow }}人
        </div>
      </div>
      <div class="flow-indicator">
        <el-progress 
          type="dashboard" 
          :percentage="flowPercentage" 
          :color="getCurrentStatus.color"
          :stroke-width="8"
        >
          <template #default>
            <div class="progress-content">
              <div class="text-sm font-medium">{{ getCurrentStatus.level }}</div>
            </div>
          </template>
        </el-progress>
      </div>
    </div>

    <!-- 分时段客流预测 - 优化后的图表 -->
    <div class="time-flow">
      <div class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">今日客流预测</div>
      
      <div class="chart-container p-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-100 dark:border-gray-700">
        <div class="flex justify-between items-center text-xs text-gray-500 dark:text-gray-400 mb-4">
          <div>时间段</div>
          <div class="chart-legend flex space-x-4">
            <span class="flex items-center">
              <span class="w-3 h-3 inline-block bg-gradient-to-r from-green-400 to-green-500 rounded-full mr-1"></span>
              舒适
            </span>
            <span class="flex items-center">
              <span class="w-3 h-3 inline-block bg-gradient-to-r from-yellow-400 to-amber-500 rounded-full mr-1"></span>
              适中
            </span>
            <span class="flex items-center">
              <span class="w-3 h-3 inline-block bg-gradient-to-r from-red-400 to-red-500 rounded-full mr-1"></span>
              拥挤
            </span>
          </div>
        </div>
        
        <div class="chart-grid grid grid-cols-9 gap-3 mt-2 h-44 relative">
          <!-- 横向网格线 -->
          <div class="absolute left-0 right-0 h-px bg-gray-100 dark:bg-gray-700" style="top: 0%"></div>
          <div class="absolute left-0 right-0 h-px bg-gray-100 dark:bg-gray-700" style="top: 25%"></div>
          <div class="absolute left-0 right-0 h-px bg-gray-100 dark:bg-gray-700" style="top: 50%"></div>
          <div class="absolute left-0 right-0 h-px bg-gray-100 dark:bg-gray-700" style="top: 75%"></div>
          <div class="absolute left-0 right-0 h-px bg-gray-100 dark:bg-gray-700" style="top: 100%"></div>
          
          <!-- 柱状图 -->
          <template v-for="(item, index) in peakTimes" :key="index">
            <div class="time-bar flex flex-col relative h-full">
              <div class="relative flex flex-col justify-end h-full w-full">
                <div 
                  class="chart-bar w-full rounded-t-md transition-all duration-500 ease-out transform hover:translate-y-1 relative overflow-hidden" 
                  :class="getBarClass(item.crowd)"
                  :style="{ height: getBarHeight(item.crowdLevel) }"
                >
                  <!-- 柱状图内光效 -->
                  <div class="absolute top-0 left-0 right-0 h-1/2 bg-white opacity-30 rounded-t-md"></div>
                  
                  <!-- 悬停提示 -->
                  <div class="tooltip opacity-0 group-hover:opacity-100 absolute -top-10 left-1/2 transform -translate-x-1/2 bg-gray-900 text-white text-xs py-1 px-2 rounded whitespace-nowrap">
                    {{ item.crowdLevel }}% 客流量
                  </div>
                </div>
              </div>
              <div class="time-label mt-2 text-xs text-gray-500 dark:text-gray-400 text-center">{{ item.time }}</div>
            </div>
          </template>
        </div>
      </div>
    </div>

    <!-- 客流提示信息 -->
    <div class="flow-tips mt-5 pt-4 border-t border-gray-100 dark:border-gray-700">
      <p class="text-sm text-gray-600 dark:text-gray-300 flex items-start">
        <InfoCircle theme="filled" size="16" class="mr-2 flex-shrink-0 text-primary-600 dark:text-primary-400 mt-0.5" />
        <span>{{ flowTips }}</span>
      </p>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';
import { InfoCircle } from '@icon-park/vue-next';
import service from '@/api/axios';

// 当前客流量 
const currentFlow = ref(245);
// 景区容量
const capacity = ref(1000);
// 客流百分比
const flowPercentage = computed(() => {
  return Math.min(Math.round((currentFlow.value / capacity.value) * 100), 100);
});

// 获取当前客流状态
const getCurrentStatus = computed(() => {
  const percentage = flowPercentage.value;
  
  if (percentage < 40) {
    return {
      level: '舒适',
      text: '当前客流量较少，游玩体验极佳',
      color: '#10b981', // 绿色
      class: 'text-green-600',
      className: '舒适'
    };
  } else if (percentage < 70) {
    return {
      level: '适中',
      text: '当前客流量适中，游玩体验良好',
      color: '#f59e0b', // 黄色
      class: 'text-yellow-600',
      className: '适中'
    };
  } else {
    return {
      level: '拥挤',
      text: '当前客流量较多，请合理安排游玩路线',
      color: '#ef4444', // 红色
      class: 'text-red-600',
      className: '拥挤'
    };
  }
});

// 客流提示
const flowTips = computed(() => {
  const status = getCurrentStatus.value;
  
  if (status.className === '舒适') {
    return '当前客流量较少，是游玩的好时机，主要景点无需排队，游览体验极佳。';
  } else if (status.className === '适中') {
    return '当前客流量适中，部分热门景点可能需要短时排队，整体游览体验良好。';
  } else {
    return '当前客流量较大，热门景点可能需要较长时间排队，建议错峰游览或前往人流较少的区域。';
  }
});

// 模拟分时段客流数据
const peakTimes = ref([
  { time: '9-10点', crowd: '舒适', crowdLevel: 30 },
  { time: '10-11点', crowd: '适中', crowdLevel: 50 },
  { time: '11-12点', crowd: '适中', crowdLevel: 60 },
  { time: '12-13点', crowd: '舒适', crowdLevel: 40 },
  { time: '13-14点', crowd: '舒适', crowdLevel: 35 },
  { time: '14-15点', crowd: '适中', crowdLevel: 55 },
  { time: '15-16点', crowd: '拥挤', crowdLevel: 85 },
  { time: '16-17点', crowd: '拥挤', crowdLevel: 90 },
  { time: '17-18点', crowd: '适中', crowdLevel: 65 }
]);

// 获取柱状图高度
const getBarHeight = (level) => {
  return `${level}%`;
};

// 获取柱状图类名
const getBarClass = (crowd) => {
  if (crowd === '舒适') return 'bg-gradient-to-t from-green-500 to-green-400 group';
  if (crowd === '适中') return 'bg-gradient-to-t from-yellow-500 to-amber-400 group';
  return 'bg-gradient-to-t from-red-500 to-red-400 group';
};

// 获取实时客流数据
const getRealTimeFlow = async () => {
  try {
    // 实际项目中，这里应该调用后端API获取实时客流数据
    // const res = await service.get('/public/spot/realtime-flow/1');
    
    // 模拟数据
    const time = new Date().getHours();
    let mockFlow;
    
    // 根据时间段模拟不同客流量
    if (time < 10) {
      mockFlow = Math.floor(Math.random() * 300) + 100; // 100-400
    } else if (time < 14) {
      mockFlow = Math.floor(Math.random() * 400) + 300; // 300-700
    } else if (time < 17) {
      mockFlow = Math.floor(Math.random() * 500) + 400; // 400-900
    } else {
      mockFlow = Math.floor(Math.random() * 300) + 200; // 200-500
    }
    
    currentFlow.value = mockFlow;
    
    // 模拟获取景区容量
    capacity.value = 1000;
    
    // 更新当前时段的客流状态
    updateCurrentTimePeak();
    
  } catch (error) {
    console.error("获取实时客流数据失败:", error);
  }
};

// 更新当前时段的客流状态
const updateCurrentTimePeak = () => {
  const hour = new Date().getHours();
  
  for (let i = 0; i < peakTimes.value.length; i++) {
    const timeRange = peakTimes.value[i].time.split('-');
    const startHour = parseInt(timeRange[0]);
    const endHour = parseInt(timeRange[1]);
    
    if (hour >= startHour && hour < endHour) {
      // 用实际数据更新当前时段的客流状态
      const percentage = flowPercentage.value;
      let crowd = '舒适';
      let crowdLevel = percentage;
      
      if (percentage < 40) {
        crowd = '舒适';
      } else if (percentage < 70) {
        crowd = '适中';
      } else {
        crowd = '拥挤';
      }
      
      peakTimes.value[i].crowd = crowd;
      peakTimes.value[i].crowdLevel = crowdLevel;
      break;
    }
  }
};

// 定时刷新数据
let timer = null;

onMounted(() => {
  getRealTimeFlow();
  
  // 每5分钟刷新一次数据
  timer = setInterval(() => {
    getRealTimeFlow();
  }, 5 * 60 * 1000);
});

onUnmounted(() => {
  if (timer) {
    clearInterval(timer);
  }
});
</script>

<style scoped>
.chart-container {
  position: relative;
}

.tooltip {
  transition: all 0.2s ease;
  z-index: 10;
}

.time-bar:hover .tooltip {
  opacity: 1;
}

@keyframes pulse {
  0%, 100% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
}

.chart-bar {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.chart-bar:hover {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}
</style>
